<template>
  <div class="flex">
    <img class="img" :src="baseInfo?.artist.cover" />
    <div class="pl-5">
      <div class="text-2xl font-bold mb-2">{{ baseInfo?.artist.name }}</div>
      <Desc :desc="baseInfo?.artist.briefDesc" :count="99" />
      <div class="flex text-xs gap-x-5 text-slate-500">
        <div class="my-2">
          单曲：<span>{{ baseInfo?.artist.musicSize }}</span>
        </div>
        <div class="my-2">
          专辑：<span>{{ baseInfo?.artist.albumSize }}</span>
        </div>
        <div class="my-2">
          MV：<span>{{ baseInfo?.artist.mvSize }}</span>
        </div>
      </div>
      <div class="btn">
        <el-button round :icon="Plus">关注</el-button>
        <el-button round :icon="Fm">歌手电台</el-button>
        <el-button round :icon="More"></el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useArtistStore } from '@/stores/artist'
import Desc from '@/components/desc/Desc.vue'
import { Plus, Fm, More } from '@icon-park/vue-next'

const { baseInfo } = storeToRefs(useArtistStore())
</script>

<style lang="less" scoped>
.img {
  @apply object-cover rounded-full flex-shrink-0 w-44 h-44;
}
</style>
